<template>
  <div class="recruitment-registration">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>招募报名</span>
        </div>
      </template>
      
      <!-- 搜索栏 -->
      <div class="search-bar">
        <el-input
          v-model="data.title"
          placeholder="搜索招募标题"
          class="search-input"
          clearable
        >
          <template #prefix>
            <el-icon><Search /></el-icon>
          </template>
        </el-input>
        <el-button type="primary" style="margin-left: 10px" @click="fetchRecruitments">查询</el-button>
      </div>

      <!-- 招募列表 -->
      <el-table :data="recriutments" style="width: 100%" v-loading="loading">
        <el-table-column prop="clubName" label="社团名称" width="180" />
        <el-table-column prop="title" label="招募标题" width="180" />
        <el-table-column prop="requirements" label="描述" />
        <el-table-column prop="requirements" label="要求" />
        <el-table-column prop="startDate" label="开始时间" width="180">
        </el-table-column>
        <el-table-column prop="endDate" label="结束时间" width="180">
        </el-table-column>
        <el-table-column label="操作" width="120">
          <template #default="scope">
            <el-button
                type="text"
                @click="handApply(scope.row)"
                size="small"
            >申请</el-button>
          </template>

        </el-table-column>
      </el-table>

    </el-card>

<!--    &lt;!&ndash; 报名表单对话框 &ndash;&gt;-->
<!--    <el-dialog-->
<!--      v-model="dialogVisible"-->
<!--      title="报名信息"-->
<!--      width="50%"-->
<!--    >-->
<!--      <el-form :model="applicationForm" label-width="120px">-->
<!--        <el-form-item label="姓名">-->
<!--          <el-input v-model="applicationForm.name" disabled />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="学号">-->
<!--          <el-input v-model="applicationForm.studentId" disabled />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="联系方式">-->
<!--          <el-input v-model="applicationForm.contact" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="自我介绍">-->
<!--          <el-input-->
<!--            v-model="applicationForm.introduction"-->
<!--            type="textarea"-->
<!--            :rows="4"-->
<!--            placeholder="请简要介绍自己，包括相关经验和技能"-->
<!--          />-->
<!--        </el-form-item>-->
<!--      </el-form>-->
<!--      <template #footer>-->
<!--        <span class="dialog-footer">-->
<!--          <el-button @click="dialogVisible = false">取消</el-button>-->
<!--          <el-button type="primary" @click="submitApplication">-->
<!--            确认报名-->
<!--          </el-button>-->
<!--        </span>-->
<!--      </template>-->
<!--    </el-dialog>-->
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import request from '@/utils/request'

const loading = ref(false)
const studentClubIds = ref([]) // 存储学生已加入的社团ID列表
const recriutments = ref([]) // 存储学生加入社团的招募列表

const data = ref({
  title: "",
  searchQuery: null,
  currentPage: 1,
  pageSize: 10,
  total: 0
})

const user = JSON.parse(localStorage.getItem('xm-pro-user'))
console.log('当前用户:', user)

// 获取学生已加入的社团列表
const fetchStudentClubs = async (studentId) => {
  try {
    const response = await request.get(`/club/selectByStudentId/${studentId}`)
    if (response.code === '200') {
      studentClubIds.value = response.data.map(club => club.id)
      console.log('学生已加入的社团列表:', studentClubIds.value.join(','))
    }
  } catch (error) {
    console.error('获取学生社团信息失败:', error)
  }
}


//获取学生未加入社团的招募列表
const fetchRecruitments = async () => {
  //获得学生已加入的社团id
  await fetchStudentClubs(user.id)
  try {
    const response = await request.get(
      `/recruitment/selectByClubs`,{
        params: {
          clubIds: studentClubIds.value.join(','),
          title: data.value.title,
        }
        }
    )
    if (response.code === '200') {
      recriutments.value = response.data
    }
  } catch (error) {
    console.error('获取招募信息失败:', error)
    return []
  }
}

const handApply = async (row) => {
  try {
    const response = await request.get('/recruitmentapplication/submitReCruitmentApplication', {
      params:{
        recruitmentId: row.id,
        studentId: user.id,
        clubId: row.clubId,
        status: '待审核'
      }
    })
    if (response.code === '200') {
      ElMessage.success('报名成功')
      fetchRecruitments()
    } else {
      ElMessage.error('报名失败，请稍后重试')
    }
  } catch (error) {
    console.error('报名失败:', error)
    ElMessage.error('报名失败，请稍后重试')
  }

}


// 监听搜索条件变化
const handleSearch = () => {
  data.value.currentPage = 1
}
// 页面加载时获取数据
onMounted(() => {
  fetchRecruitments()
})
</script>

<style scoped>
.recruitment-registration {
  padding: 20px;
}

.search-bar {
  margin-bottom: 20px;
}

.search-input {
  width: 300px;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style> 